<script setup lang="ts">
import type { BusinessUIQueryColumnType } from '@/types/custom'
import { ref, watch } from 'vue'
import { isObject } from '@vueuse/core'

interface Props {
  form: BusinessUIQueryColumnType
  modelValue?: string
}

const props = defineProps<Props>()

const isJson = ref(false)
const content = ref({})

watch(
  () => props.modelValue,
  () => {
    const json: any = props.modelValue || props.form.set_json_parse.description
    try {
      const isObj = isObject(json)
      if (isObj) {
        content.value = json
      } else {
        const value = json.replace(/\\n|\\t|\\"|\\'|\\\\/g, '')
        content.value = JSON.parse(value)
      }
      isJson.value = true
    } catch (e) {
      isJson.value = false
      content.value = {}
    }
  },
  { immediate: true }
)
</script>

<template>
  <vue-json-pretty v-if="isJson" :data="content" />
  <div v-else v-html="modelValue || form.set_json_parse.description" />
</template>
